<template>
  <div class="box">
    <!-- 头部内容 -->
    <div class="header">
      <div class="header-left">
      </div>
      <div class="header-right">
        <div class="header-right-btn" @click="showPopup1">赛事说明</div>
        <div class="header-right-btn" @click="showPopup2">报名表格</div>
        <div class="header-right-btn" @click="showPopup3">战队概览</div>
      </div>
    </div>

    <!-- 赛事说明弹窗 -->
    <van-popup v-model="show1" class="popup">
      <div class="popup-title">赛事说明</div>
      <div class="popup-content">
        <p >
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          一年一度的英雄联盟全球总决赛（World Championship，简称S赛）是LoL最高规格的赛事，汇聚了来自全球各大赛区最顶尖的战队。赛事通常在每年的9月至11月间举行，历时一个多月，经过入围赛、小组赛、四分之一决赛、半决赛和总决赛几个阶段的激烈角逐，最终决出年度总冠军。S赛不仅是选手们展示技艺和团队协作的舞台，也是玩家和粉丝们狂欢的盛会。

          各赛区的联赛如LPL（中国赛区）、LCK（韩国赛区）、LEC（欧洲赛区）和LCS（北美赛区）在整个赛季中通过春季赛和夏季赛两大赛季的比拼，选拔出最优秀的队伍代表赛区出战S赛。这些队伍通过巧妙的战术、精湛的操作以及无懈可击的团队配合，为观众呈现出一场场精彩绝伦的比赛。      

        </p>
        </div>
      <van-row class="popup-foot">
        <van-col span="6">
          <van-button block color="#e5a638"  size="small" @click="handleLogin" >前往报名</van-button>
        </van-col>
      </van-row> 
    </van-popup>

    <!-- 报名表格弹窗 -->
    <van-popup v-model="show2" class="popup" @close="handleClose">
      <div class="popup-title">报名表格</div>
      <van-form ref="form" class="popup-content" >
      <van-field
        v-model="nameTeam"
        name="战队名称"
        label="战队名称"
        placeholder="战队名称"
        :rules="[{ required: true, message: '请填写战队名称' }]"
      />      
      <van-field
        v-model="form.username1"
        name="队员1"
        label="队员1"
        placeholder="队员1"
        :rules="[{ required: true, message: '请填写队员1' }]"
      />
      <van-field
        v-model="form.username2"
        name="队员2"
        label="队员2"
        placeholder="队员2"
        :rules="[{ required: true, message: '请填写队员2' }]"
      />      
      <van-field
        v-model="form.username3"
        name="队员3"
        label="队员3"
        placeholder="队员3"
        :rules="[{ required: true, message: '请填写队员3' }]"
      />      
      <van-field
        v-model="form.username4"
        name="队员4"
        label="队员4"
        placeholder="队员4"
        :rules="[{ required: true, message: '请填写队员4' }]"
      />      
      <van-field
        v-model="form.username5"
        name="队员5"
        label="队员5"
        placeholder="队员5"
        :rules="[{ required: true, message: '请填写队员5' }]"
      />      
      <van-field
        v-model="form.username6"
        name="队员6"
        label="队员6"
        placeholder="队员6"
      />      
      <van-field
        v-model="form.username7"
        name="队员7"
        label="队员7"
        placeholder="队员7"
      />
      </van-form>
      <van-row class="popup-foot">
        <van-col span="6">
          <van-button block color="#e5a638"  size="small" @click="onSubmit" >报名</van-button>
        </van-col>
      </van-row>

    </van-popup>

    <!-- 战队概览弹窗 -->
    <van-popup v-model="show3"  class="popup">
      <div class="popup-title2">战队概览</div>
      <van-row v-if="resteamList.length > 0" class="team-list">
        <van-col class="list-item" v-for="(item,index) in resteamList" :key="index">
          <div class="item-title">{{item.nameTeam}}</div>
          <van-row class="item-right">
            <van-row class="item-name-box">
              <van-col class="name-item" v-for="(item1,index) in item.names" :key="index">{{item1}}</van-col>
              <!-- <van-col class="name-item">{{item.username2}}</van-col>
              <van-col class="name-item">{{item.username3}}</van-col>
              <van-col class="name-item">{{item.username4}}</van-col>
              <van-col class="name-item">{{item.username5}}</van-col>
              <van-col class="name-item" v-show="item.username6">{{item.username6}}</van-col>
              <van-col class="name-item" v-show="item.username7">{{item.username7}}</van-col> -->
            </van-row>
            <div class="right-btn">
              <van-button block type="danger" size="small" @click="handleDel(item)">删除</van-button>
            </div>
          </van-row>
        </van-col>
      </van-row>
      <div class="team-empty" v-else>
        暂无信息...
      </div>
    </van-popup>
  </div>
</template>

<script>
import { addTeam, delTeam, getAllTeam } from "@/api/team";
export default {
  data () {
    return {
      show1:false,
      show2:false,
      show3:false,
      teamList:[
      ],      
      resteamList:[
      {
          id:1,
          nameTeam:"湖人",
          names:[
            "詹姆斯",
            "布朗尼",
            "马斯克",
            "川普",
            "吸罗",
            "没吸",
          ]
        },        
        {
          id:2,
          nameTeam:"勇士",
          names:[
            "老大",
            "小卡拉米",
            "库里",
            "乔丹",
            "拜登",
            "火星人",
          ]
        },
      ],
      nameTeam:'',
      form:{
        username1:"",
        username2:"",
        username3:"",
        username4:"",
        username5:"",
        username6:"",
        username7:"",
      }
    }
  },
  methods:{
    async getAllTeam () {
      try {
        const res = await getAllTeam()
        this.resteamList = res
      } catch (error) {
        this.$notify({ type: 'danger', message: `调接口失败：${error}` });
        console.log("🚀 ~ file: App.vue:172 ~ getAllTeam ~ error:", error)
      }
    },
    handleDel(item) {
      this.$dialog.confirm({
        title: '删除',
        message: `您确定删除${item.nameTeam}吗？`,
      })
        .then(async() => {
          await delTeam(item)
          // console.log("🚀 ~ handleDel ~ id:", item.id)
          // const index = this.teamList.findIndex(i=>i.id == item.id)
          // console.log("🚀 ~ handleDel ~ index:", index)
          // this.teamList.splice(index,1)
          await this.getAllTeam()
          this.$notify({ type: 'success', message: '删除成功！' });
        })
        .catch((error) => {
          // on cancel
          this.$notify({ type: 'danger', message: `调接口失败：${error}` });
        });
    },
    showPopup1 () {
      this.show1 = true;
    },    
    showPopup2 () {
      this.show2 = true;
    },    
    async showPopup3 () {
      this.show3 = true;
      try {
        const res = await getAllTeam()
        console.log("🚀 ~ showPopup3 ~ res:", res)

      } catch (error) {
        this.$notify({ type: 'danger', message: `调接口失败：${error}` });

      }
    },
    async onSubmit () {
      await this.$refs.form.validate()
      console.log("🚀 ~ onSubmit ~ this.form:", this.form)
      console.log("🚀 ~ onSubmit ~ this.hasDuplicates:", this.hasDuplicates(this.form))
      if (this.hasDuplicates(this.form)) {
        return this.$notify({ type: 'danger', message: '名称重复！' });
      }
      // let id = Date.now();
      // this.form.id = id;
      // this.teamList.push({...this.form})
      const names = []
      for (const key in this.form) {
        if (this.form[key]) { names.push(this.form[key]) }
      }
      try {
        await addTeam({
        nameTeam:this.nameTeam,
        names:names
        })
        this.show2 = false;
        // this.show3 = true;
        this.$dialog.alert({
          title: '成功',
          message: '恭喜你，报名成功！',
          theme: 'round-button',
        }).then(() => {
          // on close
        });
      } catch (error) {
        this.$notify({ type: 'danger', message: `调接口失败：${error}` });
      }

    },
     hasDuplicates(form) {
      const usernames = [
        form.username1,
        form.username2,
        form.username3,
        form.username4,
        form.username5
      ];

      // 过滤掉为空的 username6 和 username7
      if (form.username6 && form.username6.trim()!= '') {
        usernames.push(form.username6);
      }
      if (form.username7 && form.username7.trim()!= '') {
        usernames.push(form.username7);
      }

      const uniqueUsernames = new Set(usernames);
      return usernames.length!== uniqueUsernames.size; 
    },
    handleLogin () {
      this.show1 = false;
      this.show2 = true;
    },
    handleClose () {
      console.log("🚀 ~ handleClose ~ this.form:", this.form)
      for (const key in this.form) {
        this.form[key] = ''
      }
      this.nameTeam = ''
      this.$refs.form.resetValidation();
    },
  }
};
</script>

<style>
.box {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/主页.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.header {
  width: 100%;
  height: 8vh;
  /* background-color: red; */
  display: flex;
}

/* .header-left {
  background-color: black;
  width: 50px;
  height: 8vh;
} */
.header-right {
  flex: 1;
  background-color: black;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.header-right-btn {
  width: 100px;
  height: 4vh;
  background-color: #e5a638;
  text-align: center;
  line-height: 4vh;
  font-size: 18px;
  font-weight: 700;
}

.popup {
  width: 80vw;
  height: 466px;
}

.popup-title {
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background-color: #4a5568;
}

.popup-content {
  height: 366px;
  overflow: auto;
}

.popup-foot {
  display: flex;
  height: 50px;
  padding: 10px;
  justify-content: end;
}

.team-list {
  width: 80vw;
  height: 416px;
  overflow: auto;
  padding-left: 5px;
}

.team-empty {
  margin-top: 80px;
  text-align: center;
}

.list-item {
  width: 75vw;
  padding: 5px;
  margin: 5px;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
}

.item-title {
  font-size: 14px;
}

.item-right{
  width: 75vw;
  display: flex;
}
.right-btn {
  width: 60px;
  padding-right: 10px;
  padding-left: 5px;
  
}
.item-name-box {
  display: flex;
  overflow-x: auto;
  flex: 1;
}
.item-name-box::-webkit-scrollbar {
  display: none;
}
.name-item {
  height: 35px;
  margin-right: 5px;
  line-height: 35px;
  text-align: center;
  border-radius: 4px;
  padding-left: 4px;
  padding-right: 4px;
  background-color: #cbd5e0;
  white-space: nowrap;
}

.popup-title2 {
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background-color: #4a5568;
}
</style>